<template>
	<view class="shop-goods-list-wrapper">
		<u-sticky offset-top="0">
			<view class="top-content">
				<view class="" :style="{ height: `${statusBarHeight}px`}"></view>
				<view class="goods-list-top-search flex-c-s">
					<uni-icons type="back" size="28" @click="back"></uni-icons>
					<view class="input-wrapper flex-c-s">
						<view class="flex-c">
							<image class="search-icon" src="/static/images/search@2x.png" mode=""></image>
							<input type="text" v-model="keyword" class="shop-goods-list-input fz26" @confirm="searchHandle" confirm-type="search" placeholder="请搜索您想要的商品" />
						</view>
						<uni-icons type="closeempty" size="30rpx" color="#999" @click="clearValue"></uni-icons>
					</view>
					<!-- <image class="customer-service-icon" src="/static/images/headphones@2x.png" mode=""></image>
					 -->
				</view>
				<!-- <view class="filter-wrapper flex-c-s">
					<image class="customer-service-icon" src="/static/images/filter.png" mode=""></image>
				</view> -->
			</view>
		</u-sticky>
		
		
		<view class="goods-list-wrapper flex-c-s">
			<view class="goods-list-item" @click="goodsInfo(r.id)" v-for="(r, i) of resultList" :key="r.id">
				<image class="goods-list-img" :src="r.listImage" mode=""></image>
				<view class="goods-name text-flemp2">
					{{r.name}}
				</view>
				<view class="goods-price-info flex-c">
					<view class="goods-current-price">
						￥{{r.productDetail?.sellingPrice}}
					</view>
					<view class="goods-prve-price">
						￥{{r.productDetail?.originalPrice}}
					</view>
					<!-- <image class="shop-car-icon" src="/static/images/shopping-cart@2x.png" mode=""></image> -->
				</view>
			</view>
		</view>
		
		<NoData v-show="!resultList.length" msg="无搜索结果" />
		<u-loadmore v-show="resultList.length" :status="statusText" marginTop="20" :loading-text="loadingText"
		        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
import { onReady, onLoad, onPageScroll } from '@dcloudio/uni-app'
import { searchGoods, } from '@/http/shop'

import NoData from '@/components/NoData.vue'

import type { IOrder } from '@/types'

export default defineComponent({
	components:{
		NoData
	},
	setup() {
		const statusBarHeight = ref(24)
		const state = reactive({
			keyword: '',
			page: 1,
			pageSize: 10, 
			total: 0,
			storeId: 0,
			categoryId: 0,
			resultList: [] as Array<any>,
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
			businessType: 1,
		})
		onReady(() => {
			uni.getSystemInfo({
				success(res) {
					statusBarHeight.value = res.statusBarHeight || 24 
				}
			})
		})
		
		onLoad((option: any) => {
			console.log(option); 
			state.keyword = option.keyword
			state.businessType = option.businessType || 1
			if(option.cId) {
				state.categoryId = option.cId
			}
			searchResult(option.keyword)
		})
		const back = () => {
			uni.navigateBack()
		}
		
		const statusText = computed(() => {
			return state.total === state.resultList.length ? 'nomore' : 'loadmore'
		})
		
		const goodsInfo = (id: number) => {
			uni.navigateTo({
				url: `/pages/shopPackge/goodsInfo/goodsInfo?id=${id}`
			})
		}
		
		const searchHandle = (e: any) => {
			searchResult(e.detail.value)
		}
		
		onPageScroll((e) => { 
			if(state.total === 0) return;
			if(state.total === state.resultList.length) return;
			state.page ++
			searchResult() 
		})
		
		const searchResult = async ( keyWords: string = '') => {
			let pramas = {
				page: state.page,
				pageSize: state.pageSize, 
				businessType: state.businessType, 
				productName: keyWords || state.keyword
			} as any
			state.categoryId && (pramas.categoryId = state.categoryId)
			state.storeId && (pramas.storeId = state.storeId)
			
			// console.log(pramas); 
			let res  = await searchGoods(pramas)
			if(res?.code === 0) {
				state.resultList = [...state.resultList,...(res.data?.list || [])]
				state.total = res.data?.total || 0
			}
			// console.log(res); 
			// console.log(state.resultList); 
		}
		
		const clearValue = () => {
			state.page = 1
			state.resultList = []
			state.keyword = ''
			searchResult()
		}
		
		return {
			back,
			statusBarHeight,
			goodsInfo,
			searchHandle,
			statusText,
			clearValue,
			...toRefs(state)
		}
	}
})
</script>
<style>page{background: #f8f8fa;}</style>
<style lang="scss" scoped>
.shop-goods-list-wrapper{
	padding-bottom: 40rpx;
	.top-content{ 
		background: linear-gradient(180deg,#ffc0d7, rgba(249,222,232,0.00) 96%); 
		padding: 20rpx 0;
		.goods-list-top-search{
			margin: 0 24rpx;
			.input-wrapper{
				width: 600rpx;
				height: 66rpx;
				background: #ffffff;
				border-radius: 10rpx;
				padding: 0 20rpx;
				.search-icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
				.shop-goods-list-input{
					flex: 1;
					height: 50rpx;
				}
			}
			.customer-service-icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.tag-sort-wrapper{
			.tag-sort-item{
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	.goods-list-wrapper{
		margin: 20rpx 24rpx;
		flex-wrap: wrap;
		.goods-list-item{
			width: 342rpx;
			height: 548rpx;
			background: #ffffff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			.goods-list-img{
				width: 342rpx;
				height: 364rpx;
			}
			.goods-name{
				word-wrap: break-word;
				width: 310rpx; 
				font-size: 26rpx;
				font-weight: 500; 
				padding: 16rpx;
			}
			.goods-price-info{
				padding:0 16rpx;
				.goods-current-price{
					font-size: 32rpx; 
					font-weight: 600; 
					color: #eb5883;
					margin-right: 20rpx;
				}
				.goods-prve-price{
					text-decoration: line-through;
					color: #b8b8b8;
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>